<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets" template="template.xhtml">
	
	<ui:define name="content">
    <h:outputText value="Log In" styleClass="titles"/>
    <br/>
    <h:panelGrid columns="2">
    <h:graphicImage url="/img/login.jpg" alt="LogIn" width="300" height="280"/>
	<h:form>
		<h:panelGrid columns="3">
			<h:outputLabel for="username" value="Username" styleClass="labels"/>
			<h:inputText id="username" value="#{customerLogon.login}" 
			required="true" styleClass="textfields" />
			<h:message for="username" styleClass="errors"/>
			
			<h:outputLabel for="password" value="Password" styleClass="labels"/>
			<h:inputText id="password" value="#{customerLogon.password}" 
			required="true" styleClass="textfields">
				<f:validateLength minimum="6" maximum="20"/>
			</h:inputText>
			<h:message for="password" styleClass="errors"/>
		</h:panelGrid>
		<h:commandButton value="Log On" action="#{customerLogon.authorize}" styleClass="buttons" />
	</h:form>
	</h:panelGrid>
  </ui:define>

</ui:composition>